<template>
  <div class="app-container">
    <el-card class="content-edit">
      <div slot="header">创建优惠券</div>
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="优惠券名称" maxlength="20">
          <el-input v-model="form['name']" style="width: 420px;"/>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form['mold']">
            <el-radio :label="1">普通优惠券</el-radio>
            <el-radio :label="2">推荐奖优惠券</el-radio>
            <el-radio :label="3">被推荐奖优惠券</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用场景">
          <el-radio-group v-model="form['type']">
            <el-radio :label="0">通用</el-radio>
            <el-radio :label="1">机场接送</el-radio>
            <el-radio :label="2">巴士路线</el-radio>
            <el-radio :label="3">专车接送</el-radio>
            <el-radio :label="4">包车路线</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="面额">
          <el-input v-model="form['amount']" type="number" style="width: 140px;">
            <span slot="suffix" style="margin-right: 10px;">元</span>
          </el-input>
        </el-form-item>
        <el-form-item label="有效时间">
          <el-date-picker
            v-model="form['useTime']"
            class="margin-right-20"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="使用条件">
          <el-radio v-model="form['condition']" label="1">新注册用户</el-radio>
          <div class="margin-top-10">
            <el-radio v-model="form['condition']" label="2">
              <span>单笔订单金额满</span>
              <el-input :disabled="form['condition']!=='2'" v-model="form['content1']" :min="0" controls-position="right" style="width: 200px;"/>
              <span>元可使用</span>
            </el-radio>
          </div>
          <div class="margin-top-10">
            <el-radio v-model="form['condition']" label="3">
              <span>指定用户</span>
              <el-select :disabled="form['condition']!=='3'" v-model="form['content2']" multiple
                         placeholder="请选择指定用户">
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.nickname"
                  :value="item.id"/>
              </el-select>
            </el-radio>
          </div>
          <el-radio v-model="form['condition']" label="4">所有用户</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'CouponCreate',
    data() {
      return {
        // 用户列表
        userList: [],
        form: {
          // 适用类型
          type: 0,
          // 获取途径
          mold: 1,
          // 优惠券名称
          name: '',
          //  有效时间
          useTime: [],
          // 开始时间
          timeFrom: null,
          // 结束时间
          timeTo: null,
          // 优惠券面额
          amount: '',
          // 使用条件
          condition: '',
          // 使用条件规则
          content1: '',
          content2: ''
        }
      }
    },
    mounted(){
      this.loadUserList()
    },
    methods: {
      // 加载用户列表
      loadUserList(){
        (async () => {
          const result = await this.$service.applicationGetAllUserList();
          if (result.code === 0) {
            this.userList = result.data || [];
          }
        })();
      },
      // 提交
      onSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.form['amount'] <= 0) {
              this.$message.error('优惠券面额不能为空且不能小于等于0');
              return;
            }
            this.loading = true;
            (async () => {
              const params = Object.assign({}, this.form);
              console.log(params)
              params.timeFrom = null;
              params.timeTo = null;
              params.content = params.condition === '2' ? params.content1 : (params.condition === '3' ? params.content2 : null);
              params.useTime && params.useTime.length !== 0 && (params.timeFrom = params.useTime[0], params.timeTo = params.useTime[1]);
              const result = await this.$service.applicationAddCoupon(params);
              this.loading = false;
              if (result.code === 0) {
                this.$message.success('操作成功~');
                this.$router.back();
              } else {
                this.$message.error(result.msg);
              }
            })();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>
